<template>
	<view class="form-container bg">
        <jkFormCard title="基本信息">
            <jkFormItem label="设备编号" :show-right-icon="false">
                <view>{{ ruleForm.machineCode }}</view>
            </jkFormItem>
            <jk-form-item label="所属工序" :show-right-icon="false">
                <view>{{ ruleForm.processName }}</view>
            </jk-form-item>
            <jk-form-item label="所属车间" :show-right-icon="false">
                <view>{{ ruleForm.workshopName }}</view>
            </jk-form-item>
        </jkFormCard>
        <view class="margin-top-30">
            <jkFormCard title="故障信息">
                <jk-form-item label="故障时间" :value="ruleForm.faultTime" @clear="ruleForm.faultTime = ''" @click="onSelectTime('faultTime')">
                    <view>{{ ruleForm.faultTime }}</view>
                </jk-form-item>
                <jk-form-item label="故障等级" :value="ruleForm.faultLevelName" @clear="onClearFaultLevel" @click="onSelectFaultLevel">
                    <view>{{ ruleForm.faultLevelName }}</view>
                </jk-form-item>
                <jk-form-item label="故障类型" :value="ruleForm.faultTypeName" @click="selectFaultTypePopupOptionState = true" @clear="setFaultTypeVal({})">
                    <view>{{ ruleForm.faultTypeName }}</view>
                </jk-form-item>
                <!--<jk-form-item label="故障项目">
                    <view>{{ ruleForm.faultName }}</view>
                </jk-form-item>-->
                <jk-form-item label="故障描述" label-position="top" :show-border-bottom="false">
                   <textarea
                       placeholder-class="color4"
                       class="textarea-style"
                       :cursor-spacing="100"
                       :adjust-position="true"
                       v-model="ruleForm.faultDescription"
                       placeholder="请输入故障描述"
                   ></textarea>
                </jk-form-item>
            </jkFormCard>
        </view>
        <view class="margin-top-30">
            <jkFormCard title="维修要求">
                <jk-form-item label="指定维修人" :value="ruleForm.repairmanName" @clear="onSelectEmp({})" @click="onShowSelectEmpPopup">
                    <view>{{ ruleForm.repairmanName }}</view>
                </jk-form-item>
                <jk-form-item label="复机时间" :value="ruleForm.restartTime" @clear="ruleForm.restartTime = ''" @click="onSelectTime('restartTime')">
                    <view>{{ ruleForm.restartTime }}</view>
                </jk-form-item>
            </jkFormCard>
        </view>
		<view class="fixed-footer">
			<u-button
                @click="onConfirmBtn"
                color="#2d8cf0"
                :loading="confirmLoading"
                icon="phone"
                iconColor="#fff"
				size="large"
            >确定呼叫</u-button>
		</view>
        <u-datetime-picker
            v-model="defaultTime"
            :show="selectDateTimePickerState"
            mode="datetime"
            :closeOnClickOverlay="true"
            @confirm="onConfirmBtnOfSelectPicker"
            @close="onCloseBtnOfSelectPicker"
            @cancel="onCloseBtnOfSelectPicker"
        ></u-datetime-picker>
        <jkPopup title="选择维修人" @clear="onClearEmp" :show="showSelectEmpPopup" @close="showSelectEmpPopup = false">
            <view class="">
                <u-search :adjustPosition="false" placeholder="请输入姓名" :clearabled="false" :height="38" @clear="onSearchBtnOfSelectEmpPopup" @custom="onSearchBtnOfSelectEmpPopup" @search="onSearchBtnOfSelectEmpPopup" v-model="searchEmpName"></u-search>
            </view>
            <scroll-view style="height: 600rpx;" :scroll-y="true">
                <view
                    v-for="(item, index) in empList"
                    :key="index"
                    style="height: 72rpx;border-bottom: solid 1rpx #e8eaec;display: flex;align-items: center;font-size: 28rpx;"
                    @click="onSelectEmp(item)"
                >{{ item.name }}</view>
            </scroll-view>
        </jkPopup>
        <jkPopupOption
            :show="selectFaultTypePopupOptionState"
            :optionList="faultTypeList"
            @visible-change="(e) => selectFaultTypePopupOptionState = e"
            @confirm="onConfirmOfSelectFaultType"
        ></jkPopupOption>
	</view>
</template>

<script>
import {
    spinFaultTypePage,
    repairOrderSave, spinFaultPage, systemEmpPage, machineManagerMachinePage
} from "../../../../api";
    import {
        formatTime,
        showLoading
    } from "../../../../utils/jk-utils";
    import jkPopup from '../../../../jk-components/jk-popup';
    import jkFormCard from '../../../../jk-components/jk-from-card';
    import jkFormItem from '../../../../jk-components/jk-from-item';
    import jkPopupOption from "../../../../jk-components/jk-popup-option";
	export default {
		components: {
            jkPopupOption,
            jkFormCard,
            jkFormItem,
			jkPopup
		},
		data() {
			return {
                selectFaultTypePopupOptionState: false,
                searchEmpName: '',
                showSelectEmpPopup: false,
                selectDateTimePickerState: false,
                defaultTime: '',
                empList: [],
				faultTypeList: [],
				faultInfoList: [],
				confirmLoading: false,
				ruleForm: {
                    'beginTime': '',
                    'callId': null,
                    'callName': '',
                    'callTime': '',
                    'endTime': '',
                    'faultId': null,
                    'faultCode': '',
                    'faultName': '',
                    'faultDescription': '',
                    'faultLevelId': null,
                    'faultLevelName': '',
                    'faultTypeCode': '',
                    'faultTypeId': null,
                    'faultTypeName': '',
                    'machineCode': '',
                    'machineId': null,
                    'machineName': '',
                    'processCode': '',
                    'processId': null,
                    'processName': '',
                    'repairDescription': '',
                    'repairmanId': null,
                    'repairmanName': '',
                    'repairmanTime': '',
                    'restartTime': '',
                    'workshopCode': '',
                    'workshopId': null,
                    'workshopName': '',
                    'faultTime': ''
				},
				rules: {
					machineName: {
						type: 'string',
						required: true,
						message: '请填写设备',
						trigger: ['blur', 'change']
					},
				},
                timeType: null,
                faultLevelList: [
                    { id: 1, name: '高' },
                    { id: 2, name: '中' },
                    { id: 3, name: '低' }
                ],
			}
		},
		onLoad(payload) {
            this.defaultTime = formatTime(Date.now());
            this.getMachineDetailRequest(payload.machineCode);
		},
		onShow() {
			this.getDependentData();
		},
		methods: {
		    getMachineDetailRequest(machineCode) {
		        if (machineCode) {
                    return machineManagerMachinePage({
                        nameOrCode: machineCode
                    }).then(res => {
                        if (res.data.status === 200) {
                            if (res.data.res && res.data.res.length) {
                                let machineItem = res.data.res[0];
                                this.$set(this.ruleForm, 'machineId', machineItem.id);
                                this.$set(this.ruleForm, 'machineCode', machineItem.code);
                                this.$set(this.ruleForm, 'machineName', machineItem.name);
                                this.$set(this.ruleForm, 'processName', machineItem.processName);
                                this.$set(this.ruleForm, 'processCode', machineItem.processCode);
                                this.$set(this.ruleForm, 'processId', machineItem.processId);
                                this.$set(this.ruleForm, 'workshopId', machineItem.workshopId);
                                this.$set(this.ruleForm, 'workshopCode', machineItem.workshopCode);
                                this.$set(this.ruleForm, 'workshopName', machineItem.workshopName);
                            }
                        }
                    });
                }
            },
            onClearFaultLevel() {
                this.$set(this.ruleForm, 'faultLevelId', null);
                this.$set(this.ruleForm, 'faultLevelName', '');
            },
            onConfirmOfSelectFaultType(e, item) {
                this.setFaultTypeVal(item);
            },
            setFaultTypeVal(item) {
                this.$set(this.ruleForm, 'faultTypeId', item.id);
                this.$set(this.ruleForm, 'faultTypeCode', item.code);
                this.$set(this.ruleForm, 'faultTypeName', item.name);

                this.$set(this.ruleForm, 'faultId', null);
                this.$set(this.ruleForm, 'faultCode', '');
                this.$set(this.ruleForm, 'faultName', '');
                this.$set(this.ruleForm, 'faultCauseId', null);
                this.$set(this.ruleForm, 'faultCauseCode', '');
                this.$set(this.ruleForm, 'faultCauseName', '');
                this.faultItemList = [];
                this.faultCauseList = [];
                this.selectFaultTypePopupOptionState = false;
                // this.getFaultItemListRequest();
                // this.getFaultCauseListRequest();
            },
            onClearEmp() {
                this.$set(this.ruleForm, 'repairmanId', null);
                this.$set(this.ruleForm, 'repairmanCode', '');
                this.$set(this.ruleForm, 'repairmanName', '');
                this.showSelectEmpPopup = false;
            },
            onSelectEmp(e) {
                this.$set(this.ruleForm, 'repairmanId', e.id);
                this.$set(this.ruleForm, 'repairmanCode', e.code);
                this.$set(this.ruleForm, 'repairmanName', e.name);
                this.showSelectEmpPopup = false;
            },
		    onShowSelectEmpPopup() {
                this.getEmpListRequest();
                this.showSelectEmpPopup = true;
            },
		    getEmpListRequest() {
		        return systemEmpPage({
                    onJob: true,
                    nameOrCode: this.searchEmpName,
                    pageNo: 1,
                    pageSize: 100
                }).then(res => {
		            if (res.data.status === 200) {
		                this.empList = res.data.res;
                    }
                })
            },
            onSearchBtnOfSelectEmpPopup() {
                this.getEmpListRequest();
            },
            onSelectFaultLevel() {
                let _this = this;
                uni.showActionSheet({
                    itemList: _this.faultLevelList.map(x => x.name),
                    success(res) {
                        _this.$set(_this.ruleForm, 'faultLevelId', _this.faultLevelList[res.tapIndex].id);
                        _this.$set(_this.ruleForm, 'faultLevelCode', _this.faultLevelList[res.tapIndex].code);
                        _this.$set(_this.ruleForm, 'faultLevelName', _this.faultLevelList[res.tapIndex].name);
                    }
                });
            },
            onSelectTime(type) {
                this.timeType = type;
                this.selectDateTimePickerState = true;
            },
            onConfirmBtnOfSelectPicker(e) {
                if (this.timeType === 'faultTime') {
                    this.$set(this.ruleForm, 'faultTime', formatTime(e.value));
                } else {
                    this.$set(this.ruleForm, 'restartTime', formatTime(e.value));
                }
                this.selectDateTimePickerState = false;
            },
            onCloseBtnOfSelectPicker() {
                this.selectDateTimePickerState = false;
            },
			onConfirmBtn() {
                this.confirmLoading = true;
                let params = JSON.parse(JSON.stringify(this.ruleForm));
                repairOrderSave(params).then(res => {
                    this.confirmLoading = false;
                    if (res.data.status === 200) {
                        uni.navigateBack({
                            delta: 1
                        });
                        uni.showToast({
                            title: '操作成功!'
                        });
                    }
                })
			},
			getFaultTypeListRequest() {
				return spinFaultTypePage({
					"auditState": 1
				}).then(res => {
					if (res.data.status === 200) {
						this.faultTypeList = res.data.res;
					}
				})
			},
			getFaultInfoListRequest() {
				return spinFaultPage({
					"faultTypeId": this.ruleForm.faultTypeId,
					"auditState": 1
				}).then(res => {
					if (res.data.status === 200) {
						this.faultInfoList = res.data.res;
					}
				})
			},
			async getDependentData() {
				showLoading(true);
				await this.getFaultTypeListRequest();
				showLoading(false);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-content-box {
		padding: 32rpx;

		.popup-content-box-title {
			font-size: 34rpx;
			text-align: center;
			margin-bottom: 20rpx;
		}
	}
</style>
